<script setup>
import { ref } from 'vue'
import { commentAdd } from '@/api/comment'
import { useCommentStore, useUserStore } from '@/stores'
defineProps(['newsId', 'commentId'])

// 默认数据
const defaultForm = {
  parentId: 0,
  newsId: 0,
  commentContent: ''
}

// 准备数据
const formModel = ref({ ...defaultForm })

const userStore = useUserStore()

const useCommnet = useCommentStore()
const onPublish = async (newsId, commentId) => {
  if (formModel.value.commentContent) {
    formModel.value.newsId = newsId
    formModel.value.parentId = commentId
    await commentAdd(formModel.value)
    useCommnet.triggerUpdate()
  } else {
    ElMessage.error('评论不能为空')
  }

  // 恢复默认数据
  formModel.value = { ...defaultForm }
}
</script>

<template>
  <div style="display: flex; margin: 10px">
    <el-avatar
      :size="50"
      :src="userStore.user.avatar"
      style="min-width: 50px; margin-right: 15px"
    ></el-avatar>
    <el-input
      v-model="formModel.commentContent"
      :autosize="{ minRows: 3, maxRows: 10 }"
      type="textarea"
      placeholder="文明上网理性发言，请遵守新闻评论服务准则"
    />
    <el-button
      type="primary"
      style="margin-left: 15px; height: 70px; font-weight: bold"
      @click="onPublish(newsId, commentId)"
    >
      发布
    </el-button>
  </div>
</template>

<style scoped></style>
